<template>
    <div class='container'>
        <!-- <t-upload action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo" /> -->
        <t-upload v-model="files2" :auto-upload="autoUpload" :theme="display"
            :data="{  file_location: '~/Desktop/upload' }" :abridge-name="[10, 8]"
            :format-response="formatResponse" draggable
            :action=action>
            </t-upload>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import type { UploadProps } from 'tdesign-vue-next';
const action = `${import.meta.env.VITE_API_BASE_URL}/file/upload/`;
function getCurrentDate(needTime = false) {
    const d = new Date();
    let month = d.getMonth() + 1;
    month = month < 10 ? Number(`0${month}`) : month;
    const date = `${d.getFullYear()}-${month}-${d.getDate()}`;
    const time = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
    if (needTime) return [date, time].join(' ');
    return date;
}
const autoUpload = ref(true);
const files2 = ref<UploadProps['value']>([
    {
        name: '默认文件',
        url: 'https://tdesign.gtimg.com/site/source/figma-pc.png',
        status: 'success',
        size: 1024,
        // 上传日期，如果接口返回的字段包含 uploadTime，则会以接口返回的为准，默认使用本地电脑时间。
        // 如果希望使用接口返回的上传日期，但是接口字段名不是 uploadTime，则可以使用函数 formatResponse 格式化接口数据
        uploadTime: '2022-09-25',
    },
]);
const display = ref<UploadProps['theme']>('file');

// res.url 图片地址；res.uploadTime 文件上传时间；res.error 上传失败的原因
function formatResponse(res: any) {
    // 响应结果添加上传时间字段，用于 UI 显示
    res.uploadTime = getCurrentDate();
    res.url = `${import.meta.env.VITE_API_BASE_URL}/file/1/${res.uuid_file_name}`;
    return res;
}
</script>
<style lang='scss' scoped>
.container {
    background-color: #dbd6d6;
    border-radius: 5px;
}
</style>